<template>
  <div class="web3-demo-container">
    <div class="page-header">
      <h1>Web3 钱包演示</h1>
      <p>连接MetaMask钱包并进行交互</p>
    </div>
    
    <!-- 钱包连接组件 -->
    <wallet-connect />
    
    <!-- 功能区域 -->
    <div class="function-area" v-if="web3State.isConnected">
      <div class="card">
        <h2>签名消息</h2>
        <van-field
          v-model="messageToSign"
          label="消息内容"
          placeholder="请输入要签名的消息"
          type="textarea"
          rows="2"
        />
        <div class="button-row">
          <van-button type="primary" @click="handleSignMessage">签名消息</van-button>
        </div>
        <div class="result-area" v-if="signatureResult">
          <h3>签名结果:</h3>
          <div class="signature-result">{{ signatureResult }}</div>
        </div>
      </div>
      
      <div class="card">
        <h2>发送交易</h2>
        <van-field
          v-model="txTo"
          label="接收地址"
          placeholder="请输入接收地址"
        />
        <van-field
          v-model="txValue"
          label="金额"
          placeholder="请输入发送金额(ETH)"
          type="number"
        />
        <van-field
          v-model="txData"
          label="数据(可选)"
          placeholder="请输入交易数据(十六进制)"
        />
        <div class="button-row">
          <van-button type="primary" @click="handleSendTransaction">发送交易</van-button>
        </div>
        <div class="result-area" v-if="txResult">
          <h3>交易哈希:</h3>
          <div class="tx-result">{{ txResult }}</div>
        </div>
      </div>
      
      <div class="card">
        <h2>切换网络</h2>
        <van-radio-group v-model="selectedNetwork">
          <van-radio name="1">以太坊主网</van-radio>
          <van-radio name="56">币安智能链</van-radio>
          <van-radio name="137">Polygon</van-radio>
          <van-radio name="42161">Arbitrum</van-radio>
        </van-radio-group>
        <div class="button-row">
          <van-button type="primary" @click="handleSwitchNetwork">切换网络</van-button>
        </div>
      </div>
    </div>
    
    <!-- 未连接钱包提示 -->
    <div class="not-connected" v-else>
      <van-empty description="请先连接钱包以使用Web3功能" />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { showToast, showSuccessToast } from 'vant';
import WalletConnect from '@/components/WalletConnect.vue';
import { web3State, signMessage, sendTransaction, switchNetwork } from '@/utils/web3';

// 签名消息
const messageToSign = ref('Hello, Web3!');
const signatureResult = ref('');

const handleSignMessage = async () => {
  if (!messageToSign.value) {
    showToast('请输入要签名的消息');
    return;
  }
  
  const signature = await signMessage(messageToSign.value);
  if (signature) {
    signatureResult.value = signature;
    showSuccessToast('签名成功');
  }
};

// 发送交易
const txTo = ref('');
const txValue = ref('');
const txData = ref('');
const txResult = ref('');

const handleSendTransaction = async () => {
  if (!txTo.value) {
    showToast('请输入接收地址');
    return;
  }
  
  if (!txValue.value || isNaN(parseFloat(txValue.value)) || parseFloat(txValue.value) <= 0) {
    showToast('请输入有效的金额');
    return;
  }
  
  // 将ETH转换为Wei
  const valueInWei = `0x${(parseFloat(txValue.value) * 1e18).toString(16)}`;
  
  const txParams = {
    to: txTo.value,
    value: valueInWei,
  };
  
  if (txData.value) {
    txParams.data = txData.value.startsWith('0x') ? txData.value : `0x${txData.value}`;
  }
  
  const txHash = await sendTransaction(txParams);
  if (txHash) {
    txResult.value = txHash;
    showSuccessToast('交易已提交');
  }
};

// 切换网络
const selectedNetwork = ref('1'); // 默认以太坊主网

const handleSwitchNetwork = async () => {
  const chainId = parseInt(selectedNetwork.value);
  const success = await switchNetwork(chainId);
  if (success) {
    showSuccessToast(`已切换到网络ID: ${chainId}`);
  }
};
</script>

<style scoped>
.web3-demo-container {
  padding: 16px;
  max-width: 800px;
  margin: 0 auto;
}

.page-header {
  text-align: center;
  margin-bottom: 24px;
}

.page-header h1 {
  font-size: 24px;
  color: #333;
  margin-bottom: 8px;
}

.page-header p {
  font-size: 14px;
  color: #666;
}

.card {
  background-color: white;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card h2 {
  font-size: 18px;
  color: #333;
  margin-bottom: 16px;
}

.button-row {
  margin-top: 16px;
  display: flex;
  justify-content: center;
}

.result-area {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed #eee;
}

.result-area h3 {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.signature-result,
.tx-result {
  background-color: #f5f7fa;
  padding: 12px;
  border-radius: 4px;
  font-size: 12px;
  word-break: break-all;
  color: #333;
  font-family: monospace;
}

.not-connected {
  padding: 32px 0;
}

:deep(.van-radio) {
  margin-bottom: 12px;
}

:deep(.van-field__label) {
  width: 80px;
}
</style>